#
<script setup lang="ts">
import chunk from 'lodash-es/chunk'
import cloneDeep from 'lodash-es/cloneDeep'
import compact from 'lodash-es/compact'
import debounce from 'lodash-es/debounce'
import difference from 'lodash-es/difference'
import filter from 'lodash-es/filter'
import find from 'lodash-es/find'
import flatten from 'lodash-es/flatten'
import flattenDeep from 'lodash-es/flattenDeep'
import flattenDepth from 'lodash-es/flattenDepth'
import get from 'lodash-es/get'
import intersection from 'lodash-es/intersection'
import isEmpty from 'lodash-es/isEmpty'
import max from 'lodash-es/max'
import mean from 'lodash-es/mean'
import merge from 'lodash-es/merge'
import min from 'lodash-es/min'
import orderBy from 'lodash-es/orderBy'
import reject from 'lodash-es/reject'
import reverse from 'lodash-es/reverse'
import set from 'lodash-es/set'
import sum from 'lodash-es/sum'
import throttle from 'lodash-es/throttle'
import union from 'lodash-es/union'
import uniq from 'lodash-es/uniq'
import uniqBy from 'lodash-es/uniqBy'
import xor from 'lodash-es/xor'
import { ref } from 'vue'

// 数组操作示例
const arrayExample = {
  // 基础数组操作
  basic: {
    title: '基础数组操作',
    original: [1, 2, 3, 4, 5, 6],
    chunk: chunk([1, 2, 3, 4, 5, 6], 2),
    reverse: reverse([1, 2, 3, 4, 5, 6]),
    compact: compact([0, 1, false, 2, '', 3, null, undefined, NaN, 4]),
  },
  // 数组去重
  dedup: {
    title: '数组去重',
    original: [1, 2, 2, 3, 3, 3, 4, 4, 5, 5],
    unique: uniq([1, 2, 2, 3, 3, 3, 4, 4, 5, 5]),
    uniqBy: uniqBy([{ x: 1 }, { x: 2 }, { x: 1 }], 'x'),
  },
  // 数组扁平化
  flatten: {
    title: '数组扁平化',
    original: [1, [2, 3], [4, [5, 6]]],
    flatten: flatten([1, [2, 3], [4, [5, 6]]]),
    flattenDeep: flattenDeep([1, [2, 3], [4, [5, 6]]]),
    flattenDepth: flattenDepth([1, [2, 3], [4, [5, 6]]], 1),
  },
  // 集合操作
  set: {
    title: '集合操作',
    arrays: {
      a: [1, 2, 3, 4],
      b: [3, 4, 5, 6],
      c: [5, 6, 7, 8],
    },
    intersection: intersection([1, 2, 3, 4], [3, 4, 5, 6]),
    union: union([1, 2, 3, 4], [3, 4, 5, 6]),
    difference: difference([1, 2, 3, 4], [3, 4, 5, 6]),
    xor: xor([1, 2, 3, 4], [3, 4, 5, 6]),
  },
  // 查找和过滤
  find: {
    title: '查找和过滤',
    original: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    find: find([1, 2, 3, 4, 5, 6], num => num > 3),
    filter: filter([1, 2, 3, 4, 5, 6], num => num % 2 === 0),
    reject: reject([1, 2, 3, 4, 5, 6], num => num % 2 === 0),
  },
  // 统计计算
  math: {
    title: '统计计算',
    original: [1, 2, 3, 4, 5, 6],
    sum: sum([1, 2, 3, 4, 5, 6]),
    mean: mean([1, 2, 3, 4, 5, 6]),
    max: max([1, 2, 3, 4, 5, 6]),
    min: min([1, 2, 3, 4, 5, 6]),
  },
}

// 对象操作示例
const objectExample = {
  original: { a: 1, b: { c: 2 } },
  nested: get({ a: 1, b: { c: 2 } }, 'b.c'),
  merged: merge({ a: 1 }, { b: 2 }, { c: 3 }),
}

// 去重示例
const uniqueExample = {
  original: [1, 1, 2, 2, 3, 3],
  unique: uniq([1, 1, 2, 2, 3, 3]),
}

// 排序示例
const users = [
  { name: 'fred', age: 48 },
  { name: 'barney', age: 34 },
  { name: 'fred', age: 40 },
  { name: 'barney', age: 36 },
]
const sortExample = orderBy(users, ['name', 'age'], ['asc', 'desc'])

// 防抖示例
const debouncedValue = ref('')
const debouncedInput = debounce((value: string) => {
  debouncedValue.value = value
}, 1000)

// 节流示例
const throttledValue = ref('')
const throttledInput = throttle((value: string) => {
  throttledValue.value = value
}, 1000)

// 深拷贝示例
const deepCloneExample = {
  original: { a: 1, b: { c: 2 } },
  cloned: cloneDeep({ a: 1, b: { c: 2 } }),
}

// 空值检查示例
const emptyCheckExample = {
  空对象: isEmpty({}),
  空数组: isEmpty([]),
  空字符串: isEmpty(''),
  空Map: isEmpty(new Map()),
  空Set: isEmpty(new Set()),
}

// 对象路径操作示例
const pathExample = {
  // 获取值
  getValue: get({ a: { b: { c: 1 } } }, 'a.b.c'),
  // 设置值
  setValue: (() => {
    const obj = {}
    set(obj, 'a.b.c', 1)
    return obj
  })(),
}
</script>

<template>
  <view class="min-h-screen bg-black">
    <!-- 背景效果 -->
    <view class="fixed inset-0">
      <view class="absolute inset-0 bg-gradient-to-b from-black via-gray-900 to-black opacity-60" />
      <view class="absolute inset-0 opacity-10 bg-grid-pattern" />
    </view>

    <!-- 主内容 -->
    <view class="relative px-8 py-12">
      <view class="max-w-2xl mx-auto space-y-8">
        <!-- 标题 -->
        <view class="text-center">
          <view class="text-2xl font-bold text-white">lodash-es 示例</view>
          <view class="block mt-2 text-gray-400">展示 lodash-es 的常用功能</view>
        </view>

        <!-- 示例卡片 -->
        <view class="bg-white/5 backdrop-blur-lg rounded-2xl p-6">
          <view class="space-y-6">
            <!-- 数组操作 -->
            <view class="space-y-4">
              <view class="text-lg font-medium text-white">数组操作</view>

              <!-- 基础数组操作 -->
              <view class="space-y-2">
                <view class="text-gray-400">基础数组操作</view>
                <view class="space-y-1">
                  <view class="text-gray-400">原始数组</view>
                  <view class="text-white">{{ arrayExample.basic.original }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">分块 (chunk)</view>
                  <view class="text-white">{{ arrayExample.basic.chunk }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">反转 (reverse)</view>
                  <view class="text-white">{{ arrayExample.basic.reverse }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">去除假值 (compact)</view>
                  <view class="text-white">{{ arrayExample.basic.compact }}</view>
                </view>
              </view>

              <!-- 数组去重 -->
              <view class="space-y-2">
                <view class="text-gray-400">数组去重</view>
                <view class="space-y-1">
                  <view class="text-gray-400">原始数组</view>
                  <view class="text-white">{{ arrayExample.dedup.original }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">基础去重 (uniq)</view>
                  <view class="text-white">{{ arrayExample.dedup.unique }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">按属性去重 (uniqBy)</view>
                  <view class="text-white">{{ JSON.stringify(arrayExample.dedup.uniqBy) }}</view>
                </view>
              </view>

              <!-- 数组扁平化 -->
              <view class="space-y-2">
                <view class="text-gray-400">数组扁平化</view>
                <view class="space-y-1">
                  <view class="text-gray-400">原始数组</view>
                  <view class="text-white">
                    {{ JSON.stringify(arrayExample.flatten.original) }}
                  </view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">一级扁平化 (flatten)</view>
                  <view class="text-white">{{ arrayExample.flatten.flatten }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">深度扁平化 (flattenDeep)</view>
                  <view class="text-white">{{ arrayExample.flatten.flattenDeep }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">指定深度扁平化 (flattenDepth)</view>
                  <view class="text-white">{{ arrayExample.flatten.flattenDepth }}</view>
                </view>
              </view>

              <!-- 集合操作 -->
              <view class="space-y-2">
                <view class="text-gray-400">集合操作</view>
                <view class="space-y-1">
                  <view class="text-gray-400">数组 A</view>
                  <view class="text-white">{{ arrayExample.set.arrays.a }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">数组 B</view>
                  <view class="text-white">{{ arrayExample.set.arrays.b }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">交集 (intersection)</view>
                  <view class="text-white">{{ arrayExample.set.intersection }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">并集 (union)</view>
                  <view class="text-white">{{ arrayExample.set.union }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">差集 (difference)</view>
                  <view class="text-white">{{ arrayExample.set.difference }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">对称差集 (xor)</view>
                  <view class="text-white">{{ arrayExample.set.xor }}</view>
                </view>
              </view>

              <!-- 查找和过滤 -->
              <view class="space-y-2">
                <view class="text-gray-400">查找和过滤</view>
                <view class="space-y-1">
                  <view class="text-gray-400">原始数组</view>
                  <view class="text-white">{{ arrayExample.find.original }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">查找第一个大于3的数 (find)</view>
                  <view class="text-white">{{ arrayExample.find.find }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">过滤出偶数 (filter)</view>
                  <view class="text-white">{{ arrayExample.find.filter }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">排除偶数 (reject)</view>
                  <view class="text-white">{{ arrayExample.find.reject }}</view>
                </view>
              </view>

              <!-- 统计计算 -->
              <view class="space-y-2">
                <view class="text-gray-400">统计计算</view>
                <view class="space-y-1">
                  <view class="text-gray-400">原始数组</view>
                  <view class="text-white">{{ arrayExample.math.original }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">求和 (sum)</view>
                  <view class="text-white">{{ arrayExample.math.sum }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">平均值 (mean)</view>
                  <view class="text-white">{{ arrayExample.math.mean }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">最大值 (max)</view>
                  <view class="text-white">{{ arrayExample.math.max }}</view>
                </view>
                <view class="space-y-1">
                  <view class="text-gray-400">最小值 (min)</view>
                  <view class="text-white">{{ arrayExample.math.min }}</view>
                </view>
              </view>
            </view>

            <!-- 对象操作 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">对象操作</view>
              <view class="space-y-1">
                <view class="text-gray-400">原始对象</view>
                <view class="text-white">{{ objectExample.original }}</view>
                <view class="text-gray-400">获取嵌套值 (b.c)</view>
                <view class="text-white">{{ objectExample.nested }}</view>
                <view class="text-gray-400">合并对象</view>
                <view class="text-white">{{ objectExample.merged }}</view>
              </view>
            </view>

            <!-- 去重操作 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">去重操作</view>
              <view class="space-y-1">
                <view class="text-gray-400">原始数组</view>
                <view class="text-white">{{ uniqueExample.original }}</view>
                <view class="text-gray-400">去重后</view>
                <view class="text-white">{{ uniqueExample.unique }}</view>
              </view>
            </view>

            <!-- 排序操作 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">排序操作</view>
              <view class="space-y-1">
                <view class="text-gray-400">按名字升序，年龄降序</view>
                <view v-for="(user, index) in sortExample" :key="index" class="text-white">
                  {{ user.name }} - {{ user.age }}
                </view>
              </view>
            </view>

            <!-- 防抖输入 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">防抖输入</view>
              <view class="space-y-1">
                <input
                  class="w-full px-4 py-2 bg-white/10 text-white rounded-lg"
                  type="text"
                  placeholder="输入内容测试防抖"
                  @input="e => debouncedInput(e.detail.value)"
                />
                <view class="text-gray-400">防抖后的值</view>
                <view class="text-white">{{ debouncedValue }}</view>
              </view>
            </view>

            <!-- 节流输入 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">节流输入</view>
              <view class="space-y-1">
                <input
                  class="w-full px-4 py-2 bg-white/10 text-white rounded-lg"
                  type="text"
                  placeholder="输入内容测试节流"
                  @input="e => throttledInput(e.detail.value)"
                />
                <view class="text-gray-400">节流后的值</view>
                <view class="text-white">{{ throttledValue }}</view>
              </view>
            </view>

            <!-- 深拷贝 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">深拷贝</view>
              <view class="space-y-1">
                <view class="text-gray-400">原始对象</view>
                <view class="text-white">{{ deepCloneExample.original }}</view>
                <view class="text-gray-400">深拷贝后</view>
                <view class="text-white">{{ deepCloneExample.cloned }}</view>
              </view>
            </view>

            <!-- 空值检查示例 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">空值检查示例</view>
              <view class="space-y-1">
                <view
                  v-for="(value, key) in emptyCheckExample"
                  :key="key"
                  class="flex justify-between items-center"
                >
                  <view class="text-gray-400">{{ key }}</view>
                  <view class="text-white">{{ value ? '是' : '否' }}</view>
                </view>
              </view>
            </view>

            <!-- 对象路径操作示例 -->
            <view class="space-y-2">
              <view class="text-lg font-medium text-white">对象路径操作示例</view>
              <view class="space-y-1">
                <view class="text-gray-400">获取值</view>
                <view class="text-white">{{ pathExample.getValue }}</view>
                <view class="text-gray-400">设置值</view>
                <view class="text-white">{{ JSON.stringify(pathExample.setValue) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.text-primary {
  color: #6366f1;
}

/* 针对 input placeholder 的颜色 */
input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
</style>
